<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>姓名案例_计算属性实现</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
    <style>
      * {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      姓:<input type="text" v-model="firstName" /><br />
      <!-- v-model 双向绑定 -->
      名:<input type="text" v-model="lastName" /><br />
      姓名 <span>{{fullName}}</span>
      <!-- 模板语法 内可以使用 vm实例中的所有属性 -->
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data() {
        // 注意:当data发生了改变,模板一定会重新进行解析
        return {
          // 属性: data里配置的数据
          firstName: "张",
          lastName: "三",
        };
      },
      // 计算属性  存在于 vm 实例上
      computed: {
        fullName: { // 计算属性存在缓存,当依赖计算的属性发生变化时会重新计算
          // fullName计算属性名，会出现在 vm 中
          // get有什么作用？当有人读取 fullName 时,get就会被调用,且返回值就作为fullName的值
          // get什么时候调用？1.初次读取fullName时 2.所依赖的数据发生变化时
          get() {
            console.log("get被调用了");
            console.log(this); // vm
            return `${this.firstName}-${this.lastName}`;
          },
          // set什么时候调用? 当 fullName 被修改时
          set(value) { // value 为修改后的fullName值
            console.log("fullName被修改为:", value);
            // 改变fullName依赖计算的属性,实现重新计算fullName
            [this.firstName,this.lastName]= value.split("-");
            //split("-")将字符串按照指定字符分割成数组，在对数组进行解构赋值
          },
        },
      },
    });
  </script>
</html>
